<template>
  <div>
    <!-- v-show采取的是css样式display:none的形式隐藏  频繁切换 -->
    <!-- v-if采用的是直接从DOM解构中删除这个元素来隐藏,可以配合v-else或v-esle-if一起使用 移除 -->
   <h1 v-show="X">你好,小Vue</h1>
   <h2 v-if="Y">你好,小爱</h2>

   <!-- v-if和v-esle使用  也就相当于if else判断语句-->
   <p v-if="age >= 18 ">我已经成年了</p>
   <p v-else >我还没有成年</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      X:false,
      Y:true,
      age:2,
    }
  }

}
</script>

<style>

</style>